import i18n from '@app-cad/common/utils/i18next';
import { NMTopoBaseCommand } from '@app-cad/environments/nextmesh/types/command';
import { TopoDialogProps } from '../type';
import { AmcaxForm, CommandDialog, Icon } from '@amcax/base';
import { MouseActionInput } from '@app-base/common/components/pick-input/mouse-action-input';
import CmdInteractor from './CmdInteractor';
import { useEffect, useRef, useState } from 'react';
import { CommandFormWrapper } from '@app-base/common/components/command-form';
import { RJSFSchema, UiSchema } from '@rjsf/utils';
import validator from '@rjsf/validator-ajv8';

import { CommandFormFooter } from '@app-base/common/components/command-form/footer';
import { documentV2 } from '@app-nextmesh/domain';
type InitType = {
  target: string[];
  source: number[];
  pickName: string;
  positionText: string;
};
function TopoDrillHoleDialog({ title, onClose }: TopoDialogProps) {
  const cmdRef = useRef<CmdInteractor>(null);
  const [formData, setFormData] = useState({
    param: 10,
  });
  const [param, setParam] = useState<InitType>({
    target: null,
    source: null,
    pickName: null,
    positionText: null,
  });
  const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
  };
  useEffect(() => {
    cmdRef.current = new CmdInteractor({ setParam });
    cmdRef.current.addExit(onClose);
    return () => {
      cmdRef.current?.destroy();
      cmdRef.current = null;
    };
  }, []);
  const onRemove = () => {
    cmdRef.current.resetPoint();
    setParam({
      target: null,
      source: null,
      pickName: null,
      positionText: null,
    });
    cmdRef.current.picker.clickNull();
  };
  const handleSubmit = async () => {
    const params = {
      target: param.target,
      source: param.source,
    };
    await documentV2.drillHole(params, [formData.param]);
    cmdRef.current.resetPoint();
  };
  const schema: RJSFSchema = {
    type: 'object',
    properties: {
      param: {
        type: 'number',
        title: '半径',
        minimum: 1,
        default: 10,
      },
    },
  };
  const uiSchema: UiSchema = {
    'ui:submitButtonOptions': {
      norender: true,
    },
  };
  const isValid = () => {
    return param.source?.length && param.target?.length > 0;
  };
  return (
    <CommandDialog
      title={title}
      placement='topLeft'
      className=''
      onClose={onClose}>
      <CommandFormWrapper>
        <MouseActionInput
          autoFocus
          onActiveFocus={() => {
            cmdRef?.current?.setMode(['face']);
          }}
          placeholder='请在面上选一个点开孔'>
          {param.source?.length && param.target?.length > 0 && (
            <div className='pick-input_base-select_selection'>
              <div>
                <div>{param.pickName}</div>
                <div>{param.positionText}</div>
              </div>
              <div
                className='m-auto'
                onClick={onRemove}>
                <Icon
                  tabIndex={0}
                  name='commons/close'
                />
              </div>
            </div>
          )}
        </MouseActionInput>
        <AmcaxForm
          className='point-project'
          schema={schema}
          validator={validator}
          uiSchema={uiSchema}
          formData={formData}
          formContext={formItemLayout}
          onChange={(data) => {
            setFormData(data.formData);
          }}
        />
        <CommandFormFooter
          onClose={onClose}
          onSubmit={handleSubmit}
          submitText='完成'
          isSubmitDisabled={!isValid()}
        />
      </CommandFormWrapper>
    </CommandDialog>
  );
}
export const cmdTopoDrillHole: NMTopoBaseCommand = {
  id: 'cmdTopoDrillHole',
  icon: 'commands/curved/point',
  label: 'command.topo.drill-hole',
  create: (label: string, onClose: () => void, props) => (
    <TopoDrillHoleDialog
      title={i18n.t(label)}
      onClose={onClose}
      props={props}
      placement='topLeft'
    />
  ),
};
